<template>
  <div class="rc-container">
    <div v-show="addRoadState">
      <div class="add-road-tips">
        <p>请先在地图上点击鼠标右键添加道路</p>
      </div>
      <div class="tag-group" style="margin-top: 1vw">
        <div class="tag-label">道路名称</div>
        <div class="roadName">
          <el-input v-model="queryForm.roadName" placeholder="请输入" />
        </div>
      </div>
      <div class="btn-group">
        <div>
          <el-button type="primary" @click="saveRoad" v-if="startPoint && endPoint">添加</el-button>
        </div>
        <div><el-button type="info" @click="removeRoad(false)">取消</el-button></div>
      </div>
    </div>

    <div v-show="!addRoadState">
      <div class="tips">
        <div class="icon"
          ><el-icon><WarningFilled /></el-icon
        ></div>
        <div>道路初始化已完成，再次道路初始化，将清空原道路标签数据！</div>
      </div>
      <div class="btn-group">
        <div class="btn-item" @click="breakList">道路初始化</div>
        <div class="btn-item" @click="addRoad">添加单条道路</div>
      </div>
      <div class="tag-group">
        <div class="tag-label">道路标签</div>
        <div class="tag-cell">
          <div
            class="tag-item"
            v-for="(item, index) in tagList"
            :key="index"
            :class="{ active: tagCurrent.includes(index) }"
            @click="tagClick(index)"
          >
            {{ item.label }}
          </div>
          <!-- <div
            class="tag-item"
            v-for="(item, index) in tagList"
            :key="index"
            :class="{ active: tagCurrent === index }"
            @click="tagClick(index)"
          >
            {{ item.label }}
          </div> -->
        </div>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <div class="search-input"
          ><el-input
            v-model="keywork"
            placeholder="请输入"
            :prefix-icon="Search"
            @keyup.enter.native="getList"
        /></div>
        <!-- <div class="export">
          <span>导出Excel</span>
        </div> -->
      </div>
      <!-- 表格 -->
      <div
        class="table"
        style="max-height: 51vh; overflow-y: auto; display: block"
        v-if="tableData && tableData.length"
      >
        <div class="table-cell" v-for="(item, index) in tableData" :key="index">
          <div class="left">
            <div class="name">{{ item.roadName }}</div>
            <div class="small">{{
              item.typeCode < tagList.length && item.typeCode >= 0
                ? tagList[item.typeCode].label
                : ''
            }}</div>
            <!-- <div class="small">长度：{{ item.lang }}km 道路段数：{{ item.num }}</div> -->
          </div>
          <div class="right">
            <div class="edit" @click="editor(item, index)">编辑</div>
            <div class="line"></div>
            <div class="del" @click="delRoad(item.id)">删除</div>
          </div>
        </div>
      </div>
      <div class="not-data" v-else>暂无数据</div>
    </div>
    <!-- 弹窗 -->
    <div class="statistics-dio" :class="{ show: sdShow }">
      <div class="head">
        <div class="back" @click="breakList">
          <div style="margin-top: 3px"
            ><el-icon><ArrowLeft /></el-icon
          ></div>
          <div>返回</div>
        </div>
        编辑单条道路
        <div class="save" @click="addRoadSave">保存</div>
      </div>
      <div class="title">基本信息</div>
      <div class="or-group">
        <div class="label">道路名称</div>
        <div class="val">
          <el-input style="width: 100%" v-model="queryForm.roadName" placeholder="请输入道路名称" />
        </div>
      </div>
      <div class="or-group">
        <div class="label">道路标签</div>
        <div class="val">
          <el-select style="width: 100%" v-model="queryForm.typeCode" placeholder="请选择">
            <el-option
              v-for="(item, index) in tagList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="title" style="margin: 1vw 0">道路段信息</div>
      <div class="selected">
        <div>
          <div class="selected-val" v-if="editorFlag">
            <el-input v-model="queryForm.direction" placeholder="道路走向"
          /></div>
          <div v-else> {{ queryForm.direction }}</div>
        </div>
        <div class="or">
          <div class="edit" @click="editorFlag = true">编辑</div>
          <div class="line" v-if="editorFlag"></div>
          <div class="success" v-if="editorFlag" @click="editorFlag = false">确定</div>
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData2" border style="width: 100%" v-loading="tableLoading">
          <el-table-column label="路段" width="80">
            <template #default><span>01</span></template>
          </el-table-column>
          <el-table-column prop="originName" label="起点名称">
            <template #default="{ row }">
              <div class="road-input" v-if="editorFlag">
                <el-input style="width: 100%" v-model="row.originName" placeholder="起点名称" />
              </div>
              <div v-else>{{ row.originName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="terminusName" label="终点名称">
            <template #default="{ row }">
              <div class="road-input" v-if="editorFlag">
                <el-input style="width: 100%" v-model="row.terminusName" placeholder="终点名称" />
              </div>
              <div v-else>{{ row.terminusName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="area" label="辖区">
            <template #default="{ row }">
              <div class="road-input" v-if="editorFlag">
                <el-select style="width: 100%" v-model="row.nodeId" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in areaList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div v-else>
                {{ ['兰山区', '河东区', '罗庄区'][row.nodeId] }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  inject,
  reactive,
  toRefs,
  onMounted,
  nextTick,
  computed,
  onBeforeUnmount,
} from 'vue';
import { useMapStore } from '@/store/modules/map';
import { Search, ArrowLeft, WarningFilled } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getCustomRoadSelectList,
  getCustomRoadInsertRoad,
  getCustomRoadUpdateRoad,
  getCustomRoadDeleteRoadById,
  getCustomRoadSelectByTypeCodeList,
} from '@/api/tomae';
export default defineComponent({
  setup(props, { emit }) {
    const userStore = useMapStore();
    const state = reactive({
      map: computed(() => userStore.ownMap),
      tagCurrent: [],
      keywork: '',
      sdShow: false,
      roadName: '',
      tagList: [
        {
          label: '高速',
          value: 0,
        },
        {
          label: '环线及快速路',
          value: 1,
        },
        {
          label: '主干路',
          value: 2,
        },
        {
          label: '次干路',
          value: 3,
        },
        {
          label: '支路',
          value: 4,
        },
      ],
      tableData: [],
      areaList: [
        {
          label: '兰山区',
          value: 9317,
        },
        {
          label: '河东区',
          value: 9353,
        },
        {
          label: '罗庄区',
          value: 9318,
        },
      ],
      tableData2: [
        {
          section: '01',
          sName: '黄庄桥',
          eName: '董官庄桥',
          area: '罗庄区',
        },
      ],
      form: {
        name: '',
        label: '',
      },
      selected: {},
      addRoadState: false,
      menu: '',
      menuPoint: '',
      starMarker: null,
      endMarker: null,
      icon: {
        start: require('@/assets/images/maps/start.png'),
        via: require('@/assets/images/maps/via.png'),
        end: require('@/assets/images/maps/end.png'),
      },
      startPoint: '',
      endPoint: '',
      viaPoint: [],
      polylineList: [],
      queryForm: {
        roadName: '', //道路名称
        englishName: '', //道路英文名
        typeCode: '', //标签类型 0高速，1环线及快速路，2主干，3次干，4支路
        direction: '', //道路方向
        originName: '', //起点名称
        origin: '', //起点坐标
        terminusName: '', //终点名称
        terminus: '', //终点坐标
        nodeId: 0, // 辖区id  0兰山区，1河东区，2罗庄区
      },
      customRoadMiddles: [],
      editorFlag: false,
      tableLoading: false,
    });
    // 标签点击
    const tagClick = (index) => {
      if (state.tableLoading) {
        return;
      }
      if (state.tagCurrent.includes(index)) {
        state.tagCurrent.splice(state.tagCurrent.indexOf(index), 1);
      } else {
        state.tagCurrent.push(index);
      }
      getList();
    };
    // 点击编辑
    const editor = (item) => {
      console.log(item);
      state.queryForm = JSON.parse(JSON.stringify(item));
      state.tableData2 = [
        {
          originName: item.originName,
          terminusName: item.terminusName,
          nodeId: Number(item.nodeId),
        },
      ];
      // state.selected = item;
      state.sdShow = true;
      if (state.map.getZoom() < 16) {
        state.map.setZoom(16);
      }
      state.map.clearOverlays();
      if (item.origin) {
        state.startPoint = new window.BMap.Point(
          item.origin.split(',')[0],
          item.origin.split(',')[1],
        );
        addMaker('start', state.startPoint);
        state.map.panTo(state.startPoint);
      }
      if (item.terminus) {
        state.endPoint = new window.BMap.Point(
          item.terminus.split(',')[0],
          item.terminus.split(',')[1],
        );
        addMaker('end', state.endPoint);
      }

      if (item.customRoadMiddleList) {
        state.viaPoint = [];
        item.customRoadMiddleList.forEach((item) => {
          let p = new window.BMap.Point(item.middle.split(',')[0], item.middle.split(',')[1]);
          state.viaPoint.push(p);
          addViaSport(p);
        });
      }

      if (state.startPoint && state.endPoint) {
        drawRoad();
      }
      state.map.addContextMenu(state.menu);
    };
    // 点击添加单条道路
    const addRoad = () => {
      state.sdShow = false;
      state.addRoadState = true;
      state.map.addContextMenu(state.menu);
      removeRoad(true);
    };
    // 取消操作
    const removeRoad = (isFlage) => {
      if (!isFlage) {
        state.addRoadState = false;
        state.map.removeContextMenu(state.menu);
      }
      state.startPoint = '';
      state.endPoint = '';
      state.viaPoint = [];
      state.polylineList = [];
      state.map.clearOverlays();
      state.queryForm = {
        roadName: '', //道路名称
        englishName: '', //道路英文名
        typeCode: '', //标签类型 0高速，1环线及快速路，2主干，3次干，4支路
        direction: '', //道路方向
        originName: '', //起点名称
        origin: '', //起点坐标
        terminusName: '', //终点名称
        terminus: '', //终点坐标
        nodeId: '', // 辖区id  0兰山区，1河东区，2罗庄区
      };
    };
    // POI检索
    const poiSearcg = (p, type) => {
      var geoc = new window.BMap.Geocoder();
      geoc.getLocation(p, function (rs) {
        if (type === 'start') {
          if (!state.queryForm.roadName) state.queryForm.roadName = rs.addressComponents.street;
          state.queryForm.originName = rs.addressComponents.street || '无名路';
          state.queryForm.origin = rs.point.lng + ',' + rs.point.lat;
          state.queryForm.nodeId = ['兰山区', '河东区', '罗庄区'].indexOf(
            rs.addressComponents.district,
          );
        } else if (type === 'end') {
          state.queryForm.terminusName = rs.addressComponents.street || '无名路';
          state.queryForm.terminus = rs.point.lng + ',' + rs.point.lat;
        }
      });
    };
    // 绘制道路
    const drawRoad = () => {
      state.polylineList.forEach((item) => {
        state.map.removeOverlay(item);
      });
      if (state.startPoint && state.endPoint) {
        state.polylineList = [];
        var driving = new window.BMap.RidingRoute(state.map, {
          renderOptions: { map: state.map, autoViewport: false },
          onSearchComplete(results) {
            // 绘制途径路线

            if (results) {
              poiSearcg(results.getStart());
              poiSearcg(results.getEnd());
              var sy = new window.BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                scale: 0.5, //图标缩放大小
                strokeColor: '#fff', //设置矢量图标的线填充颜色
                strokeWeight: '2', //设置线宽
              });
              var icons = new window.BMap.IconSequence(sy, '10', '30');
              var pts = results.getPlan(0).getRoute(0).getPath();
              var polyline = new window.BMap.Polyline(pts, {
                icons: [icons],
                strokeWeight: '8',
                strokeOpacity: 0.8,
                strokeColor: '#0E5FF4',
              });
              state.polylineList.push(polyline);
              state.map.addOverlay(polyline);
            }
          },
          onMarkersSet(routes) {
            console.log(routes);
            routes.forEach((item, index) => {
              state.map.removeOverlay(item);
            });
          },
          onInfoHtmlSet() {},
          onPolylinesSet(routes) {
            // 路线绘制
            routes.forEach((Route) => {
              var polyline = Route.getPolyline();
              polyline.setStrokeColor('#59FF59');
              // polyline.setStrokeOpacity(1)
              polyline.setStrokeWeight(1);
            });
          },
        });

        //途经点方式化路线:
        // driving.search(state.startPoint, state.endPoint, { waypoints: state.viaPoint });

        //分段画路线:
        if (state.viaPoint && state.viaPoint.length) {
          for (let i = 0; i < state.viaPoint.length; i++) {
            if (i === 0) {
              driving.search(state.startPoint, state.viaPoint[i]);
            } else {
              driving.search(state.viaPoint[i - 1], state.viaPoint[i]);
            }
          }
          driving.search(state.viaPoint[state.viaPoint.length - 1], state.endPoint);
        } else {
          driving.search(state.startPoint, state.endPoint);
        }
      }
    };
    // 添加标点
    const addMaker = (type, p) => {
      if (type == 'start') {
        state.map.removeOverlay(state.starMarker);
      } else {
        state.map.removeOverlay(state.endMarker);
      }
      let myIcon = new window.BMap.Icon(state.icon[type], new window.BMap.Size(30, 47), {
        anchor: new window.BMap.Size(16, 32),
      });
      let del = new window.BMap.ContextMenu();

      if (type == 'start') {
        state.starMarker = new window.BMap.Marker(p, {
          icon: myIcon,
        });
        del.addItem(
          new window.BMap.MenuItem(
            // 定义菜单项实例
            '删除', // 传入菜单项的显示文本
            function (p) {
              state.startPoint = '';
              drawRoad();
              state.map.removeOverlay(state.starMarker);
            }, // 传入菜单项的回调函数
            {
              width: 50, // 指定菜单项的宽度
              id: 'addstartmark', // 指定菜单项dom的id
            },
          ),
        );
        state.starMarker.addContextMenu(del);
      } else {
        state.endMarker = new window.BMap.Marker(p, {
          icon: myIcon,
        });
        del.addItem(
          new window.BMap.MenuItem(
            // 定义菜单项实例
            '删除', // 传入菜单项的显示文本
            function (p) {
              state.endPoint = '';
              drawRoad();
              state.map.removeOverlay(state.endMarker);
            }, // 传入菜单项的回调函数
            {
              width: 50, // 指定菜单项的宽度
              id: 'addendmark', // 指定菜单项dom的id
            },
          ),
        );
        state.endMarker.addContextMenu(del);
      }
      poiSearcg(p, type);
      state.map.addOverlay(type == 'start' ? state.starMarker : state.endMarker);
      drawRoad();
    };
    // 添加途经点
    const addViaSport = (p) => {
      let marker = null;
      let myIcon = new window.BMap.Icon(state.icon.via, new window.BMap.Size(30, 47), {
        anchor: new window.BMap.Size(16, 32),
      });
      let del = new window.BMap.ContextMenu();
      marker = new window.BMap.Marker(p, {
        icon: myIcon,
      });
      del.addItem(
        new window.BMap.MenuItem(
          // 定义菜单项实例
          '删除', // 传入菜单项的显示文本
          function () {
            state.viaPoint.forEach((item, index) => {
              if (item.lat == p.lat && item.lng == p.lng) {
                state.viaPoint.splice(index, 1);
                state.customRoadMiddles.splice(index, 1);
              }
            });
            drawRoad();
            state.map.removeOverlay(marker);
          }, // 传入菜单项的回调函数
          {
            width: 50, // 指定菜单项的宽度
            id: 'addstartmark', // 指定菜单项dom的id
          },
        ),
      );
      marker.addContextMenu(del);
      state.customRoadMiddles.push({
        middleName: '测试途径点3', //途径点名称
        middle: p.lng + ',' + p.lat, //途径点坐标
      });
      state.map.addOverlay(marker);
      drawRoad();
    };
    // 设置右键菜单
    const setMenu = () => {
      state.menu = new window.BMap.ContextMenu();
      let txtMenuItem = [
        {
          text: '设为起点', // 定义菜单项的显示文本
          callback: function (p) {
            // 定义菜单项点击触发的回调函数
            if (state.map.getZoom() < 16) {
              state.map.panTo(p);
              state.map.setZoom(16);
            }
            state.startPoint = p;
            addMaker('start', p);
          },
        },
        {
          text: '添加途经点', // 定义菜单项的显示文本
          callback: function (p) {
            // 定义菜单项点击触发的回调函数
            if (state.map.getZoom() < 16) {
              state.map.panTo(p);
              state.map.setZoom(16);
            }
            state.viaPoint.push(p);
            addViaSport(p);
          },
        },
        {
          text: '设为终点',
          callback: function (p) {
            if (state.map.getZoom() < 16) {
              state.map.panTo(p);
              state.map.setZoom(16);
            }
            state.endPoint = p;
            addMaker('end', p);
          },
        },
      ];
      for (let i = 0; i < txtMenuItem.length; i++) {
        state.menu.addItem(
          new window.BMap.MenuItem(
            // 定义菜单项实例
            txtMenuItem[i].text, // 传入菜单项的显示文本
            txtMenuItem[i].callback, // 传入菜单项的回调函数
            {
              width: 100, // 指定菜单项的宽度
              id: 'menu' + i, // 指定菜单项dom的id
            },
          ),
        );
      }
    };
    // 保存单条道路
    const saveRoad = () => {
      state.addRoadState = false;
      state.sdShow = true;
      state.tableData2 = [
        {
          originName: state.queryForm.originName,
          terminusName: state.queryForm.terminusName,
          nodeId: Number(state.queryForm.nodeId),
        },
      ];
    };
    // 获取道路列表
    const getList = async () => {
      if (state.tableLoading) {
        return;
      }
      state.tableLoading = true;
      let params = {
        typeCode: state.tagCurrent.join(','),
        roadName: state.keywork,
        queryType: "edit",// 查询类型， 新增参数， list表示查询“重点道路”数据， edit表示查询“道路配置”的数据
      };
      const data = await getCustomRoadSelectList(params);
      console.log(data, '道路列表');
      state.tableData = data;
      state.tableLoading = false;
    };
    // 新增/添加道路
    const addRoadSave = async () => {
      console.log(state.queryForm, 'queryForm');
      let params = Object.assign({}, state.queryForm, state.tableData2[0]);
      console.log(params, 'params');
      if (!params.roadName) {
        ElMessage({
          message: '请输入道路名称',
          type: 'warning',
        });
        return;
      }
      if (!params.typeCode && params.typeCode !== 0) {
        ElMessage({
          message: '请选择道路标签',
          type: 'warning',
        });
        return;
      }
      let quest = params.id ? getCustomRoadUpdateRoad : getCustomRoadInsertRoad;
      const data = await quest({ customRoadMiddles: state.customRoadMiddles, customRoad: params });
      ElMessage({
        message: '操作成功',
        type: 'success',
      });
      breakList();
      getList();
    };
    // 删除操作
    const delRoad = (id) => {
      ElMessageBox.confirm('是否确认删除当前道路?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const data = await getCustomRoadDeleteRoadById({ id });
          breakList();
          getList();
          ElMessage({
            type: 'success',
            message: '操作成功',
          });
        })
        .catch(() => {});
    };
    // 返回
    const breakList = () => {
      state.sdShow = false;
      removeRoad(false);
      ElMessage({
        message: '道路初始化完成，道路新数据于24小时后更新',
        type: 'success',
      });
      return;
    };
    onMounted(() => {
      getList();
      nextTick(() => {
        if (state.map) {
          setMenu();
        }
      });
    });
    // 页面离开
    onBeforeUnmount(() => {});
    return {
      ...toRefs(state),
      tagClick,
      editor,
      Search,
      ArrowLeft,
      WarningFilled,
      addRoad,
      saveRoad,
      removeRoad,
      addRoadSave,
      breakList,
      delRoad,
      getList,
    };
  },
});
</script>
<style scoped lang="less">
.rc-container {
  padding-top: 2vw;
  .tips {
    border: 1px solid #037bff;
    border-radius: 8px;
    padding: 6px 10px;
    color: white;
    display: flex;
    align-items: center;
    .icon {
      color: rgba(3, 123, 255, 1);
      font-size: 18px;
      padding-top: 5px;
      margin-right: 10px;
    }
  }
  .btn-group {
    display: flex;
    align-items: center;
    margin: 1vw 0;
    .btn-item {
      padding: 6px 0.53vw;
      background: #037bff;
      box-shadow: 0px 4px 0px 0px rgba(226, 239, 253, 0.2);
      border-radius: 8px 0px 8px 0px;
      margin-right: 1vw;
      color: white;
      cursor: pointer;
    }
  }
  .tag-group {
    display: flex;
    color: rgba(255, 255, 255, 0.7);
    align-items: center;
    margin: 0 0 1vw;
    .roadName {
      color: white;
      border: 1px solid rgba(3, 123, 255, 1);
      border-radius: 4px;
    }
    .tag-label {
      padding-right: 2.08vw;
    }
    .tag-cell {
      display: flex;
    }
    .tag-item {
      padding: 4px 10px;
      cursor: pointer;
      margin-right: 1.0416vw;
    }
    .tag-item.active {
      color: white;
      background: #037bff;
      border-radius: 4px;
    }
    .today {
      display: flex;
      justify-content: space-between;
      flex-grow: 1;
      .refresh {
        cursor: pointer;
        color: #4979ff;
      }
    }
    .date {
      border: 1px solid rgba(3, 123, 255, 1);
      border-radius: 4px;
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search-input {
      border: 1px solid #037bff;
      border-radius: 8px;
      flex-grow: 3;
    }
    .export {
      flex-grow: 2;
      color: rgba(3, 123, 255, 1);
      display: flex;
      text-align: right;
      align-items: center;
      justify-content: flex-end;
      span {
        cursor: pointer;
      }
    }
  }
  .table {
    width: 100%;
    border-top: 1px solid rgba(235, 235, 235, 0.4);
    margin: 1vw 0;
    .table-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(235, 235, 235, 0.4);
      padding: 0.5vw;
      .name {
        font-size: 1.0416vw;
        color: white;
      }
      .small {
        color: rgba(255, 255, 255, 0.4);
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .statistics-dio {
    position: absolute;
    left: calc(100% + 10px);
    height: 80vh;
    top: 0;
    width: 27.0833vw;
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(-100vw);
    transition: all 0.5s;
    z-index: 9;
    display: flex;
    flex-direction: column;
    .head {
      text-align: center;
      color: white;
      font-size: 1.0416vw;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.0416vw;
      .back {
        left: 0.5vw;
        position: absolute;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 14px;
      }
      .save {
        right: 1vw;
        position: absolute;
        cursor: pointer;
        color: rgba(3, 123, 255, 1);
        font-size: 16px;
      }
    }
    .title {
      position: relative;
      padding-left: 1.25vw;
      color: white;
      display: flex;
      align-items: center;
    }
    .title::before {
      position: absolute;
      content: '';
      display: block;
      width: 2px;
      height: 12px;
      left: 0.875vw;
      background-color: rgba(3, 123, 255, 1);
    }
    .or-group {
      padding: 1vw 1vw 0;
      display: flex;
      align-items: center;
      color: rgba(255, 255, 255, 0.6);
      .val {
        border: 1px solid #666666;
        border-radius: 4px;
        flex-grow: 1;
        margin-left: 1vw;
      }
    }
    .selected {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1vw 0;
      color: white;
      .or {
        display: flex;
        align-items: center;
      }
    }
    .table {
      padding: 0 1vw;
      border-top: 0 none;
      box-sizing: border-box;
    }
  }
  .edit {
    color: rgba(87, 162, 245, 1);
    cursor: pointer;
  }
  .del {
    color: rgba(250, 86, 86, 1);
    cursor: pointer;
  }
  .success {
    color: rgb(24, 206, 0);
    cursor: pointer;
  }
  .line {
    width: 1px;
    height: 10px;
    background-color: rgba(235, 235, 235, 0.4);
    margin: 0 1vw;
  }
  .statistics-dio.show {
    transform: translateX(0);
  }
  .add-road-tips {
    font-size: 1.0416vw;
    padding: 10px;
    background-color: #e2e2e2;
    color: #ee4c00;
  }
  .btn-group {
    display: flex;
    align-items: center;
    div {
      margin-right: 1vw;
    }
  }
}
.selected-val {
  border: 1px solid #037bff;
  border-radius: 8px;
}
.not-data {
  padding-top: 1vw;
  color: white;
}
</style>
